<template>
  <div>
    <!-- Card -->
    <div class="card card-hover-shadow h-100" href="#">
      <div class="card-body">
        <h1 class="card-title">{{ cate }}</h1>
        <hr />

        <div class="row align-items-center gx-2 mb-1">
          <div class="col-6">
            <span class="h5 text-secondary">{{ origin }}均价</span><br />
          </div>
          <div class="col-6">
            <h4>{{ date }}</h4>
          </div>
        </div>
        <br />
        <!-- End Row -->

        <div class="row align-items-center gx-2 mb-3">
          <div class="col-6">
            <span class="h3">{{ price }}</span
            ><br />
          </div>

          <div class="col-6">
            <h5 class="text-warning">最高报价：{{ maxOrigin }} {{ max }}</h5>
          </div>
        </div>
        <br />

        <div class="row align-items-center gx-2 mb-3">
          <div class="col-6"><span class="h5">单位：元/斤</span></div>

          <div class="col-6">
            <h5 class="text-primary">最低报价：{{ minOrigin }} {{ min }}</h5>
          </div>
        </div>
        <br />
        <span class="font-size-sm">相比昨日</span>
        <span class="badge badge-soft-danger"> {{ priceChange }} </span>
      </div>
    </div>

    <!-- End Card -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      max: "",
      maxOrigin: "",
      min: "",
      minOrigin: "",
    };
  },
  props: ["cate", "date", "price", "priceChange", "origin"],
  created() {
    this.axios
      .get(
        "http://122.51.157.58:8081/api-service/getMaxPriceOrigin?key=123456&marketDate=" +
          this.date +
          "&cate=" +
          this.cate
      )
      .then((body) => {
        var result = body.data;
        this.max = result.data.result[0].originAvgPrice;
        this.maxOrigin = result.data.result[0].origin;
      });

    this.axios
      .get(
        "http://122.51.157.58:8081/api-service/getMinPriceOrigin?key=123456&marketDate=" +
          this.date +
          "&cate=" +
          this.cate
      )
      .then((body) => {
        var result = body.data;
        this.min = result.data.result[0].originAvgPrice;
        this.minOrigin = result.data.result[0].origin;
      });
  },
};
</script>

<style scoped>
@import url("../../../static/css/theme-min.css");
</style>




